<template>
<view>
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">零钱提现</block>
	</cu-custom>	
	<view class="cashList">		
		<view class="card" v-if="card.length">
			<radio-group @change="radioChange">
				<label class="item padding-top-sm padding-bottom-sm" v-for="(item, index) in card" :key="index">
					<view>
						<view :style="{backgroundImage: 'url('+ item.images +')'}"></view>
						<view>
							<text>{{ item.name }}</text>
							<text>{{ item.subPhone }}</text>
						</view>
					</view>
					<view class="radio">
						<radio class='red margin-left-sm' :class="item.checked ? 'checked':''" :checked="item.checked" :value="item.type"></radio>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="list" v-if="payList.length">
			<view class="title">其他提现方式</view>
			<view class="pay">
				<navigator :url="'/assets/addcash?type='+item.type+'&action=add'" hover-class="none" :style="{backgroundImage: 'url('+item.images+')'}" class="item" v-for="(item, index) in payList" :key="index">
					<view>{{ item.name }}</view>
					<view>{{ item.bind }}</view>
				</navigator>
			</view>
		</view>
		<view class="btn">
			<button type="warn" @tap="cash">确认提现账号</button>
		</view>
		<uni-fab
		:pattern="pattern"
		:content="content"
		:horizontal="horizontal"
		:vertical="vertical"
		:direction="direction"
		@trigger="trigger"
		></uni-fab>		
	</view>	
</view>
</template>

<script>
	import { MoneyCash } from '@/common/api/users'
	import UniFab from '@/components/uni-fab' 
	export default {
		name:'cashlist',
		components: { UniFab },
		data () {
			return {
				payList: [],
				card: [],
				user_id: '',
				params: {
					name: '',
					type: '',
					phone: ''
				},
				is_allow: 1,
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#e4393c'
				},
				content: [
					{
						iconPath: '/static/urecord.png',
						selectedIconPath: '/static/urecord.png',
						text: '记录',
						active: false
					},
					{
						iconPath: '/static/manager.png',
						selectedIconPath: '/static/manager.png',
						text: '管理',
						active: false
					}
				]				
			}
		},
		onShow() {
			this.getList()

		},
		deactivated() {
			this.params.name = ''
			this.params.type = ''
			this.params.phone = ''
		},
		methods: {
			trigger (e) {
				switch(e.index) {
					case 0:
					uni.navigateTo({
						url: '/assets/cashLog'
					})					
					break;
					case 1:
					if (this.card.length) {
						uni.navigateTo({
							url: `/assets/bindaccount`
						})
					} else {
						uni.showModal({
							content: '您还没有绑定账号',
							showCancel: false
						})
					}					
					break;
				}
			},
			getList () {
				uni.showLoading()
				MoneyCash().then(res => {
					uni.hideLoading()
					if (!res.code) {
						this.payList = res.data.bind
						this.is_allow=res.data.is_allow
						res.data.data.forEach(item => { 
							item.checked = false
							item.type = item.type.toString()
						})
						this.card = res.data.data.map(item => {
							item.subPhone = item.phone.substr(0, 3) + '****' + item.phone.substr(7)
							return item
						})
						uni.setStorageSync('bankCard', this.card)
						if (!res.data.data.length) {
							uni.showModal({
								title: '',
								content: '您还没有任何提现方式，请先绑定提现方式才能提现！',
								showCancel:false
							})
						}
					}
				})
			},
			radioChange(e) {
				const card = this.card
				card.forEach(item => {
					item.checked = item.type === e.detail.value
					if (item.type === e.detail.value) {
						this.params.type = item.type
						this.params.name = item.name
						this.params.phone = item.phone
					}
				})
				this.card = card
			},
			cash (item) {
				if (this.params.type) {
					if(!this.is_allow){
						uni.showModal({
							content: '尚未满足提现条件或不在提现时间段',
							showCancel: false
						})
					} else {
						uni.navigateTo({
							url: `/assets/cashWay?name=${this.params.name}&type=${this.params.type}&phone=${this.params.phone}`
						})
					}
				} else {
					uni.showToast({
						title: '请选择提现方式',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../common/styles/variables.less';	
.cashList {
	.card {
		padding: 0 15upx;
		background-color:white;
		margin-bottom: 10px;
		radio-group {
			width: 100%;
			.item {
				display: flex;
				justify-content: space-between;
				background: white;
				font-size: @minSize;
				.border-bottom;
				box-sizing: border-box;
				&:last-of-type {
					border-bottom: none;
				}
				& > view {
					&:nth-of-type(1) {
						display: flex;
						align-items: center;
						& > view {
							&:nth-of-type(1) {
								width: 45upx;
								height: 45upx;
								margin-right: 20upx;
								background-repeat: no-repeat;
								background-size: contain;
								background-position: center center;
							}
							&:nth-of-type(2) {
								display: flex;
								flex-direction: column;
								flex-flow: column;
								& > text {
									&:last-of-type {
										color:@gray;
										font-size:@minSize;
									}
								}
							}
						}
					}
				}
				.radio {
					display: flex;
					align-items: center;
				}
			}			
		}
	}
	.list {
		z-index: 3;
		bottom: 0;
		background-color:white;
		font-size: 30upx;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
		.title {
			text-align: left;
			height: @height;
			display: flex;
			align-items: center;
			margin: 0 15upx;
			font-size: @medium;
			.border-bottom;
		}
		.pay {
			box-sizing: border-box;
			padding: 0 15px;
			overflow: hidden;
			display: block;
			.item {
				padding: 25upx 0 25upx 50upx;
				position: relative;
				font-size: 24upx;
				background-repeat:no-repeat;
				background-size: 40upx 40upx;
				background-position: left center;
				background-color:white;
				text-align: left;
				line-height: 1.4;
				border: none;
				display: flex;
				justify-content:space-between;
				& > view {
					&:last-of-type {
						color:@gray;
						padding-right: 25upx;
					}
				}
				&:last-of-type {
					&::after {
						display: none;
					}
				}
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					right:0;
					width: 15upx;
					height: 15upx;
					transform: translate(0,-50%) rotate(45deg);
					border-top: 1px solid #999;
					border-right:1px solid #999;
				}
				&::after {
					content:'';
					position: absolute;
					height: auto;
					bottom: 0;
					left: 0;
					width: 100%;
					border-style: dashed;
					border-width: 1px 0 0 0;
					border-color: #f1f1f1;
					transform: scale(1);
					border-radius: 0;
					top: auto;
				}
			}
		}
	}
	.btn {
		margin: 60upx 15px;
	}
}
</style>
